<template>
  <div class="box-container">
    <search-box @search="search" />
    <add-btn text="添加用户" @click.native="addUserDialogVisible=true" />
    <users-table
      :table-data="usersList"
      @edit="getEditInfo"
      @delete="onDelete"
      @distribute="onDistribute(arguments)"
    />
    <pagination
      :page-data="usersForm"
      :total="total"
      @page-change="getUsersList"
    />
    <!-- 添加用户对话框 -->
    <add-user v-model="addUserDialogVisible" @success="getUsersList" />
    <!-- 编辑用户信息对话框 -->
    <edit-user
      v-model="editUserDialogVisible"
      :edit-users-form="editUsersForm"
      @success="getUsersList"
    />
    <!-- 分配用户对话框 -->
    <distribute-role
      v-model="distributeRoleDialogVisible"
      :roles-list="rolesList"
      :user-data="userData"
      @success="getUsersList"
    />
  </div>
</template>

<script>
import { getUsersList, getUsersInfoById, deleteUserById } from '@/api/user'
import { getRolesList } from '@/api/role'
import AddBtn from '@/components/AddBtn'
import UsersTable from './components/UsersTable.vue'
import AddUser from './components/add-user.vue'
import EditUser from './components/edit-user.vue'
import DistributeRole from './components/distribute-role.vue'
export default {
  name: 'Users',
  components: { AddBtn, UsersTable, AddUser, EditUser, DistributeRole },
  data() {
    return {
      usersForm: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      total: 0,
      usersList: [], // 用户列表数据
      addUserDialogVisible: false, // 添加用户对话框是否显示
      editUserDialogVisible: false, // 编辑用户对话框是否显示
      distributeRoleDialogVisible: false, // 分配用户对话框是否显示
      editUsersForm: {}, // 存储根据 ID 查询获取的用户信息
      rolesList: [], // 角色列表数据存储
      userData: {}
    }
  },
  created() {
    this.getUsersList()
  },

  methods: {
    // 点击搜索，发送请求
    search(val) {
      this.usersForm.query = val
      this.usersForm.pagenum = 1
      this.getUsersList()
    },
    // 获取角色列表数据
    async getUsersList() {
      const res = await getUsersList(this.usersForm)
      // console.log(res)
      this.total = res.total
      this.usersList = res.users
    },
    // 根据 ID 查询获取用户信息并打开编辑用户对话框
    async getEditInfo(id) {
      const res = await getUsersInfoById(id)
      this.editUsersForm = res
      this.editUserDialogVisible = true
    },
    // 点击删除单个用户
    onDelete(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteUserById(id)
        this.getUsersList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击分配角色
    async onDistribute(data) {
      const res = await getRolesList()
      this.userData = { username: data[0], role_name: data[1], id: data[2] }
      this.rolesList = res
      this.distributeRoleDialogVisible = true
    }
  }
}
</script>

<style scoped lang='scss'>

</style>
